---
title: Development Setup
description: Setup instructions for contributors and local development
---

# Development Setup

This guide will set you up with a local development environment for Onlook. This involves a Next.js app, a Supabase backend, and the ability to run dev containers with Codesandbox.

> **Note**: This guide is for development and contributing to Onlook. For deploying Onlook for production use, see [Self-Hosting](/self-hosting).

## Prerequisites

These are the prerequisites for setting up Onlook development environment.

- [Bun](https://bun.sh) - Enables running the monorepo
- [Docker](https://docs.docker.com/get-started/get-docker/) - Enables running the Supabase backend
- [Node](https://nodejs.org/en/download/) – Minimum version `v20.16.0` or latest

## Setup

### 1. Clone the repository

   ```bash
   git clone https://github.com/onlook-dev/onlook.git
   cd onlook
   bun install
   ```

### 2. Run backend

   Make sure you have Docker running from the instructions above.

   ```bash
   bun backend:start
   ```

    Grab the `anon key` and `service role key` from the output. We'll use these in the environment setup step.

### 3. Get API keys

#### a. Get Codesandbox API key

1. Go to [Codesandbox Dashboard](https://codesandbox.io/dashboard)
2. Click on settings in the left menu, your workspace setting should open
3. Navigate to the "API" tab
4. Click "Create API Token" and generate an API token
5. Copy the token and save it for the environment setup step

Note: We plan on enabling running the dev containers with Docker Desktop in the future after we figure out the best API integration. 

#### b. Get OpenRouter API key

Request an API key from OpenRouter. This is used for chatting with your project. https://openrouter.ai/settings/keys

#### c. Get Fast Apply API key

    For applying AI code, SOTA is to use fast apply models in order to resolve the code change. There are two options for Fast Apply providers:

    - [MorphLLM](https://morphllm.com/dashboard)
    - [Relace](https://app.relace.ai/settings/api-keys)

    You only need to get one of the keys and set it in the environment variables in later steps.

### 4. Set environment variables


Run the interactive environment setup script:

```bash
bun run setup:env
```

**Troubleshooting**: If you run into issues with the interactive environment setup script, use this instruciton to set the environment variables manually: [appendix](/developers/appendix)

### 5. Initialize the database

Set up the database schema. You will need to run this command every time there's a change to the database schema.

Note: If prompted for interaction such as choosing an option, cd into `packages/db` and run `bun run db:push` to use interactive mode.
   ```bash
   bun db:push
   ```

### 6. Seed the database with test data

Seed the database with test data. This will create test users and projects.
   ```bash
   bun db:seed
   ```

### 7. Run development server

   ```bash
   bun dev
   ```

Go to [http://localhost:3000](http://localhost:3000) to see the app running. You're all set for development!

## What's Next?

Now that you have Onlook running locally, explore these resources to make your first contribution or learn more about the architecture. Understanding how Onlook works will help you contribute more effectively to this visual editor for React and TailwindCSS.

<Cards>
  <Card title="Learn about Architecture" href="/developers/architecture" />
  <Card title="How to Contribute" href="/developers" />
  <Card title="Troubleshooting" href="/developers/troubleshooting" />
</Cards>
